<script lang="ts" setup>
import {ref, watch, defineProps, defineEmits} from 'vue'
import requestUtil from "@/api/request.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  id: {
    type: Number,
    default: -1,
    required: true,
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
  dialogTitle: {
    type: String,
    default: '',
    required: true,
  }
})

// do not use same name with ref
const form = ref({
  id: -1,
  username: '',
  password: '123456',
  name: '',
  phone: '',
  job_id: '',
  status: 0,
  dept_id: 2,
  dept_name: '',
  role_id: 2,
  role_name: '',
  permission_rank: 0,
  remark: '',
})

const checkUsername = async (rule, value, callback) => {
  // 当表单中的用户ID为-1时，表示这是新建用户，需要进行用户名存在性检查
  if (form.value.id == -1) {
    // 通过请求Util发送POST请求到后端，检查用户名是否已存在
    const res = await requestUtil.post("manage_system/employee_check", {
      username: form.value.username
    });
    // 如果后端返回的code为500，表示用户名已存在
    if (res.data.code == 200) {
      // 通过回调函数返回错误信息，提示用户用户名已存在
      callback(new Error("用户名已存在！"));
    } else {
      // 如果用户名不存在，通过回调函数表示验证通过
      callback();
    }
  } else {
    // 如果表单中的用户ID不为-1，表示这是修改用户，直接通过验证
    callback();
  }
}
// 定义表单验证规则
const rules = ref({
  // 用户名验证规则
  username: [
    // 规则1：用户名为必填项
    {required: true, message: '请输入用户名'},
    // 规则2：用户名需通过自定义验证函数checkUsername的检验，在失去焦点时触发
    {required: true, validator: checkUsername, trigger: "blur"}
  ],
  password: [
      // 规则1：密码为必填项，在失去焦点时触发验证
    {required: true, message: "密码不能为空", trigger: "blur"},
      // 规则2：密码长度需为6-16个字符，在失去焦点时触发验证
      {
      validator: (rule, value, callback) => {
        if (!value) {
          // 如果值为空，则直接通过验证（因为已经由上面的必填规则处理）
          callback();
        } else if (value.length >= 6 && value.length <= 16) {
          // 如果值在6到16个字符之间，则通过验证
          callback();
        } else {
          // 如果值不在6到16个字符之间，则触发错误消息
          callback(new Error("密码长度需为6-16个字符"));
        }
      },
      trigger: "blur"
    },],
  name: [
    // 规则1：姓名为必填项
    {required: true, message: '请输入姓名'},
  ],
  // 手机号验证规则
  phone: [
    // 规则1：手机号为必填项，在失去焦点时触发验证
    {required: true, message: "手机号码不能为空"},
    // 规则2：手机号格式需符合正则表达式，在失去焦点时触发验证
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur"
    }
  ],
  job_id: [
    // 规则1：工号为必填项，在失去焦点时触发验证
    {required: true, message: "工号不能为空"},
    // 规则2：工号长度需为4-6个字符，在失去焦点时触发验证
    {
      validator: (rule, value, callback) => {
        if (!value) {
          // 如果值为空，则直接通过验证（因为已经由上面的必填规则处理）
          callback();
        } else if (value.length >= 3 && value.length <= 6) {
          // 如果值在4到6个字符之间，则通过验证
          callback();
        } else {
          // 如果值不在4到6个字符之间，则触发错误消息
          callback(new Error("工号长度需为4-6个字符"));
        }
      },
      trigger: "blur"
    }
  ]
})

// 用于获取表单实例的引用
const formRef = ref(null)
const initFormData = async (id) => {
  let result = await requestUtil.post('manage_system/employee_detail', {
    id: id
  })
  form.value = result.data.data
}
// 监听dialogVisible的变化，以决定是否初始化表单数据
watch(
    () => props.dialogVisible,
    () => {
      // 获取传入的ID
      let id = props.id;
      // 如果ID不为-1，则初始化表单数据
      if (id != -1) {
        initFormData(id)
      } else {
        // 如果ID为-1，则重置表单数据为默认值
        form.value = {
          id: -1,
          username: '',
          password: '123456',
          name: '',
          phone: '',
          job_id: '',
          status: 0,
          dept_id: 2,
          dept_name: '',
          role_id: 2,
          role_name: '',
          permission_rank: 0,
          remark: '',
        }
      }
    }
)

const emits = defineEmits(['update:modelValue', 'initEmployeeList'])
const handleClose = () => {
  emits('update:modelValue', false)
}

const roleList = ref([])
const getRoleList = async () => {
  const result = await requestUtil.get('manage_system/role')
  roleList.value = result.data.data
}
getRoleList()

const deptList = ref([])
const getDeptList = async () => {
  const result = await requestUtil.get('manage_system/dept')
  deptList.value = result.data.data
}
getDeptList()

const handleConfirm = () => {
  // 验证表单数据
  formRef.value.validate(async (valid) => {
    // 如果表单数据验证通过
    if (valid) {
      // 发送保存用户信息的异步请求
      let result = await requestUtil.post("manage_system/employee_save", form.value);
      let data = result.data;
      // 根据服务器返回的结果进行相应处理
      if (data.code == 200) {
        // 显示成功消息
        ElMessage.success("执行成功！")
        // 重置表单数据
        formRef.value.resetFields();
        // 触发父组件的用户列表初始化事件
        emits("initEmployeeList")
        // 关闭对话框
        handleClose();
      } else {
        // 显示错误消息
        ElMessage.error(data.msg);
      }
    } else {
      // 如果表单数据验证失败，打印错误日志
      console.log("fail")
    }
  })
}

</script>

<template>
  <el-dialog
      :model-value="dialogVisible"
      :title="dialogTitle"
      width="30%"
      @close="handleClose">
    <el-form
        ref="formRef"
        :rules="rules"
        :model="form"
        label-width="auto"
        style="max-width: 600px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" :disabled="form.id==-1? false:'disabled'"/>
        <el-alert
            v-if="form.id==-1"
            title="默认初始密码：123456"
            :closable="false"
            style="line-height: 10px;"
            type="success">
        </el-alert>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" :disabled="form.id==-1? false:'disabled'"/>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" :disabled="form.id==-1? false:'disabled'"/>
      </el-form-item>
      <el-form-item label="工号" prop="job_id">
        <el-input v-model="form.job_id" :disabled="form.id==-1? false:'disabled'"/>
      </el-form-item>
      <el-form-item label="部门" v-if="id === 1">
        管理部门
      </el-form-item>
      <el-form-item label="部门" v-else>
        <el-select v-model="form.dept_id" placeholder="请选择">
          <el-option v-for="item in deptList" :key="item.id" :label="item.dept_name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="角色" v-if="id === 1">
        超级管理员
      </el-form-item>
      <el-form-item label="角色" v-else>
        <el-select v-model="form.role_id" placeholder="请选择">
          <el-option v-for="item in roleList" :key="item.id" :label="item.role_name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <div style="margin: auto">
          <el-button type="primary" @click="handleConfirm">提交</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>




